<template>
  <div id="list-change">
      <div class="changeList" v-show="$store.getters.booksLength">
        <table border="1">
            <thead>
                <tr>
                    <th></th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(i,idx) in $store.state.books" :key="idx">
                    <td>{{i.id}}</td>
                    <td>{{i.name}}</td>
                    <td>{{i.autor}}</td>
                    <td>￥{{i.price}}</td>
                    <td>
                        <button @click="decreament(idx)" :disabled="i.count <= 1">-</button>
                        {{i.count}}
                        <button @click="increament(idx)">+</button>
                    </td>
                    <td>
                        <button @click="remove(idx)">删除</button>
                        <button @click="change(idx)">改价</button>
                    </td>
                </tr>
            </tbody>
        </table>
      </div>
      <span>totalprice:￥{{$store.getters.getTatalpirce}}</span>
      <div class="messageBox" v-show="isDisplay">
          <div class="wrap">
            <input type="text" @input="getInput">
            <button @click="sure">确定</button>
            <button @click="change" class="cancel">取消</button>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'ListChange',
  data() {
      return {
          isDisplay: false,
          num: null,
          val: '',
      }
  },
  methods: {
    decreament(idx){
        // this.$store.state.books[idx].count--;
        this.$store.commit('decrement',idx);
    },
    increament(idx){
        // this.$store.state.books[idx].count++;
        this.$store.commit('increment',idx);
    },
    remove(idx){
        // this.$store.state.books.splice(idx,1);
        this.$store.commit('remove',idx);
    },
    change(idx){
        this.isDisplay = !this.isDisplay;
        this.num = idx;
        console.log(idx);
    },
    getInput(event){
        console.log(event.target.value);
        this.val = event.target.value;
    },
    sure(){
        console.log(this.num);
        for(let i in this.$store.state.books){
            if(i == this.num){
                console.log(i);
                this.$store.state.books[i].price = this.val;
            }
        }
        this.isDisplay = !this.isDisplay;
    }
  },
//   computed: {
//     getTatalpirce(){
//         let totalPrice = 0;
//         for(let i in this.$store.state.books){
//             totalPrice += this.$store.state.books[i].price * this.$store.state.books[i].count;
//         }
//         return totalPrice;
//     },
//   },
}
</script>

<style>
    table{
        text-align: center;
    }
    .messageBox{
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .messageBox input{
        width: 300px;
        height: 30px;
    }
    .messageBox button{
        width: 60px;
        height: 35px;
        border: 1px solid #999;
        background-color: aquamarine;
        margin-left: 10px;
    }
    .cancel{
        background-color: burlywood !important;
    }
</style>